<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{color:red}
    </style>
</head>
<body>
  

    
    <p>文字</p>
    <p>文字2</p>
    <div>good</div>
    
<script>


// Vue面试题
// v-show和v-if的区别
// 为何v-for中要用key
//  vue 组件通讯
//  react 组件通讯
//  jsx本质
//  context 是什么，有何用途
// shouldComponentUpdate的用途
// 描述redux单项数据流
// setState是同步还是异步? (场景图,见下页)
// 框架综合应用
// 基于React设计-个todolist (组件结构, redux state数据结构)
// 基于Vue设计一个购物车(组件结构, vuex state数据结构)


// webpack面试题
// 前端代码为何要进行构建和打包?
// module chunk bundle分别什么意思,有何区别?
// loader和plugin的区别?


// webpack面试题
// webpack如何实现懒加载?
// webpack常见性能优化
// babel-runtime和babel-polyfill的区别

// 面试官为何要这样考察?
// 保证候选人能正常工作一考察使用
// 多个候选人竞争时,选择有技术追求的一考 察原理

// 看候选人是否能独立承担项目一考 察设计能力


// vue
// 自己去看文档不行吗?
// 行。但这种一种最低效的方式
 
// 文档是一个备忘录,给会用的人查阅,并不是入门教程
// 文档全面冗长且细节过多,不能突出面试考点


// 指令、插值
// 插值、表达式
// 指令、动态属性
// v-html :会有XSS风险,会覆盖子组件


// 条件渲染
// v-if v-else的用法,可使用变量,也可以使用===表达式
// v-if和v-show的区别?
// v-if和v-show的使用场景?
// v-if
// v-else-if
// v-else
// dom切换频繁 用v-show  一次显示与隐藏用v-if

// computed和watch
// computed有缓存, data不变则不会重新计算
// watch如何深度监听?
 
// watch监听引用类型,拿不到oldVal


// 循环(列表)渲染
 
// 如何遍历对象?一也可以用 v-for
// key的重要性。key 不能乱写(如random或者index )
// v-for和v-if不能一起使用!



// 事件
// event参数,自定义参数
// 事件修饰符,按键修饰符
// [观察]事件被绑定到哪里?

// 事件是原生的被挂载到当前元素




 



 

// 如何应对.上述面试题?
// 框架的使用(基本使用,高级特性,周边插件)
// 框架的原理(基本原理的了解,热~门技术的深度,全面性)


// Vue组件使用
// props和$emit
// 组件间通讯-自定义事件
// 组件生命周期
// bus.$on("事件名",事件处理函数)
// bus = new Vue();
// bus.$off()
// bus.$on

// 父子组件生命周期顺序
// index created
// list created
// list mounted
// index mounted
// 创建从外到内容，渲染从内到外。

// index before update
// list before update
// list updated
// index updated
// 更新看data


// Vue高级特性
// 不是每个都很常用,但用到的时候必须要知道
// 考察候选人对Vue的掌握是否全面,且有深度
// 考察做过的项目是否有深度和复杂度(至少能用到高级特性)

// Vue高级特性
// ◆自定义v-model
// ◆动态、异步组件
// ◆$nextTick
// ◆keep-alive
// ◆slot
// ◆mixin


// slot
// 基本使用
// 作用域插槽
// 具名插槽


// 动态组件
// <Component : is="NextTickName" />
 
// <div v-for="(val, key) in newsData" :key="key">
// <component : is="val.type"/> 
// </div>

// 异步加载组件
// formDemo:()=>import(xxx.vue);

// keep-alive
// 缓存组件
// 频繁切换,不需要重复渲染
// Vue常见性能优化
//  keep-alive 切换就没有mounted
 
// mixin
// 多个组件有相同的逻辑,抽离出来
// mixin并环是完美的解决方案,会有一-些问题
// Vue 3提出的Composition API旨在解决这些问题
// minxins:[myMixin]


// mixin的问题
// 变量来源不明确，不利于阅读
// 多mixin可能会造成命名冲突
// mixin和组件可能出现多对多的关系,复杂度较高


// 相关的面试技巧

// 可以不太深入,但必须知道
// 熟悉基本用法，了解使用场景
// 最好能和自己的项目经验结合起来

export default {
    data(){return {city:"bj"}},
    methods:{
        showName(){
            console.log(this.name)
        }
    },
    mounted(){
        console.log("mixin mounted",this.name)
    }
}

// Vuex基本概念
//  state
//  
// mutation
//  getters
//  action


// 用于Vue组件
// ◆dispatch
// ◆mapGetters
// ◆commit
// ◆mapActions
// ◆mapState
// ◆mapMutations


// Vue-router使用
// 面试考点并不多(前提是熟悉Vue )
// 路由模式( hash、
// H5 history )
// 路由配置(动态路由、懒加载)

// Vue-router路由模式
// hash模式(默认) ,如http://abc.com/#/user/10
// H5 history模式,如http://abc.com/user/20
// imooc
// 后者需要server端支持,因此无特殊需求可选择前者

// mode:'history'|'hash'

// 动态路由 路由参数
// 路由懒加载

 
// Vuex Vue-router总结
// 面试考点并不多(前提是熟悉Vue )
 
// 掌握基本概念,基本使用
// 面试官时间有限,需考察最核心、最常用的问题,而非边角问题






</script>
</body>
</html>

 
